<template>
  <div>
    <el-form-item label="门头照" prop="doorCard">
        <el-upload list-type="picture-card" :action="action" :show-file-list="false" :on-success="handleShopLogo">
        <img v-if="imageUrl" :src="imageUrl" class="avatar"  width="148" height="148"/>
        <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
        <!-- <p class="tipsText">请上传1:1图片</p> -->
        <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
            <div class="cropper-content">
                <div class="cropper" style="text-align:center">
                    <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :outputSize="option.outputSize"
                        :outputType="option.outputType"
                        :info="option.info"
                        :canScale="option.canScale"
                        :autoCrop="option.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :fixed="option.fixed"
                        :fixedBox="option.fixedBox"
                        :fixedNumber="option.fixedNumber"
                    ></vueCropper>
                </div>
                <div class="Tips">滚轮可以放大缩小图片</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rotateLeftHandle">左旋转</el-button>
                <el-button @click="rotateRightHandle">右旋转</el-button>
                <el-button @click="changeScaleHandle(1)">放大</el-button>
                <el-button @click="changeScaleHandle(-1)">缩小</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="finish">确认</el-button>
            </div>
        </el-dialog>
        <div class="exampleBox">
            <div class="triangle"></div>
            <div class="exampleContent">
                <div class="exampleContentImg">
                    <div class="img" @click="exampleVisible = true"></div>
                </div>
                <div class="exampleContentText">
                <div class="top">
                    <p class="radius"></p>
                    <p class="text">请上传包含门头牌子的清晰照片</p>
                </div>
                <div class="bottom">
                    <p class="radius"></p>
                    <p class="text">可上传扫描件或清晰完整的照片</p>
                </div>
                </div>
            </div>
        </div>
        <el-dialog title="示例图片" :visible.sync="exampleVisible" append-to-body>
            <div class="dialogImg">
                <img src="../../assets/images/doorCard.png" alt="">
            </div>
        </el-dialog>
    </el-form-item>
  </div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import { listSearchMixin } from "@/config/mixin";
import api from "@/api";
export default {
  mixins: [listSearchMixin],
  components: {
    VueCropper
  },
  data(){
    return{
      action: api.upload,
      imageUrl: '',
      dialogVisible: false,
      exampleVisible: false,
      // 裁剪组件的基础配置option
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        canMove:true,
      },
      picsList: [], //页面显示的数组
      // 防止重复提交
      loading: false,
      fileinfo:{}
    }
  },
  methods: {
    handleShopLogo(res, file) {//店铺logo
        //上传成功后将图片地址赋值给裁剪框显示图片
        this.$nextTick(() => {
            // this.option.img = res.data.url
            this.option.img = URL.createObjectURL(file.raw);
            this.fileinfo = res
            this.dialogVisible = true
        })
    },
    changeScaleHandle(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
        this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
        this.$refs.cropper.rotateRight();
    },
   beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;
 
    if (!isJPG) {
     this.$message.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
     this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
   },
    cancel() {
        this.loading = false
    },
    finish(res) {
        this.$refs.cropper.getCropBlob((data) => {
            let picFile = new File([data], `${(new Date).getTime()}.png`);
            let fd = new FormData()
            fd.append('file', picFile)
            let params = {
              url: this.action,
              method: 'POST',
              data: fd
            }
            this.sendReq(params, res => {
                console.log(res)
                this.loading = true
                this.dialogVisible = false
                this.imageUrl = res.data.url
                this.$emit('doorCardChild', this.imageUrl);
            })
        })

    }
  }
}
</script>
<style  lang="scss" scoped>
    .dialogImg {
        img {
            max-width: 100%;
        }
    }
    .exampleBox {
        width: 716px;
        height: 192px;
        .exampleContent{
            position: relative;
            top:10px;
            right:0px;
            width:714px;
            height:160px;
            padding:8px;
            background-color: #F7F7F7;
            border: #CACACA solid 1px;
            border-radius: 10px;
            .exampleContentImg {
                width: 140px;
                height: 140px;
                background: url(../../assets/images/doorCard.png) no-repeat 0 0;
                background-size:100% 100%;
                float: left;
                margin-left: 20px;
                margin-top: 10px;
                position: relative;
                .img {
                    width: 60px;
                    height: 27px;
                    background: url(../../assets/images/example@2x.png) no-repeat 0 0;
                    background-size:100% 100%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            .exampleContentText {
                float: left;
                margin-top: 21px;
                margin-left: 20px;
            .radius {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #999999;
                float: left;
                position: relative;
                top: 16px;
              }
            .text {
                float: left;
                margin-left: 11px;
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
              }
            }
          }
        .exampleContent:before{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: -16px;;
            left:88px;
            padding:0;
            border-bottom:8px solid #F7F7F7;
            border-top:8px solid transparent;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            display: block;
            content:'';
            z-index: 12;
        }
        .exampleContent:after{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: -18px;;
            left:87px;
            padding:0;
            border-bottom:9px solid #CACACA;
            border-top:9px solid transparent;
            border-left:9px solid transparent;
            border-right:9px solid transparent;
            display: block;
            content:'';
            z-index:10
        }
    }
    .tipsText {
        width: 100px;
    }
    .Tips {
        font-size: 16px;
        color: red;
    }
    .cropper-content{
        width:500px;height:500px;background: pink;
    }
    .cropper{
        width:500px;
        height:500px;
        background: yellow;
    }
</style>